<template>
  <el-dialog v-model="visible" title="添加护理项目" width="500px" :close-on-click-modal="false" class="add-project-dialog">
    <el-form :model="form" :rules="rules" ref="formRef" label-width="100px" class="form-body">
      <el-form-item label="编号：" prop="projectId">
        <el-input v-model="form.projectId" placeholder="请输入编号" />
      </el-form-item>
      <el-form-item label="项目名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入项目名称" />
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input v-model="form.price" type="number" placeholder="请输入价格" />
      </el-form-item>
      <el-form-item label="执行次数" prop="frequency">
        <el-input v-model="form.frequency" type="number" placeholder="请输入次数" />
      </el-form-item>
      <el-form-item label="执行周期" prop="cycle">
        <el-input v-model="form.cycle" placeholder="例如：每周1次" />
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="form.description" placeholder="请输入描述" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="form.status" placeholder="请选择状态">
          <el-option label="启用" value="1" />
          <el-option label="停用" value="0" />
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineExpose, defineEmits } from 'vue'
import {inject} from 'vue'
const axios = inject("axios")

import { ElMessage } from 'element-plus'

const visible = ref(false)
const formRef = ref()
const emit = defineEmits(['refresh'])

const form = ref({
  projectId: '',
  name: '',
  price: '',
  frequency: '',
  cycle: '',
  description: '',
  status: ''
})

const rules = {
  projectId: [{ required: true, message: '请输入项目编号', trigger: 'blur' }],
  name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
  price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
  frequency: [{ required: true, message: '请输入执行次数', trigger: 'blur' }],
  cycle: [{ required: true, message: '请输入执行周期', trigger: 'blur' }],
  description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}

const open = () => {
  resetForm()
  visible.value = true
}
defineExpose({ open })

const submit = () => {
  formRef.value.validate(async (valid) => {
    if (!valid) return
    try {
      const res = await axios.post('/nursingProject/addNursingProject', null, {
        params: form.value
      })
      if (res.data.status === 200) {
        ElMessage.success(res.data.msg || '添加成功')
        visible.value = false
        emit('refresh')
      } else {
        ElMessage.error(res.data.msg || '添加失败')
      }
    } catch (err) {
      ElMessage.error('请求异常')
      console.error(err)
    }
  })
}

const resetForm = () => {
  form.value = {
    projectId: '',
    name: '',
    price: '',
    frequency: '',
    cycle: '',
    description: '',
    status: ''
  }
}
</script>

<style scoped>
.add-project-dialog ::v-deep(.el-dialog__header) {
  font-size: 20px;
  font-weight: bold;
  padding-bottom: 10px;
}

.form-body {
  padding: 10px 0;
}

.el-form-item {
  margin-bottom: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 10px;
}

.el-input__inner {
  border-radius: 4px;
  font-size: 14px;
}
</style>
